<template>
  <div>
    <div v-for="(item, index) of list" :key="index">
      <div>{{ item.name }}  --  {{ item.age }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { PersonList } from '@/types/04interface&type';
import { ref } from 'vue'

// defineProps可以接受泛型，list参数必须是PersonList类型，?表示可选
// 解构出来的list仍然具有响应式
// let { list } = defineProps<{ list?: PersonList }>()

// withDefaults可以设置默认值，第一个参数是defineProps的返回值，第二个参数对象，对象的属性是一个函数，返回默认值
// let prop = withDefaults(defineProps<{ list?: PersonList }>(), {
//   list: () => [{ name: 'xiaoming', age: 18 }]
// })

// 也可以通过解构赋值的方式给props赋值
let { list = [{ name: '鸡蛋清', age: 1 }] } = defineProps<{ list?: PersonList }>()
console.log("父组件传值", list)
</script>

<style lang="scss" scoped>

</style>